{% extends 'app01/admin/home.html' %}

{% block content %}
    <div class="panel panel-default">
        <div class="panel-heading">管理员个人信息</div>
        <div class="panel-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">

                            {% csrf_token %}
                            <label for="myfile" style="margin-left: 10px" class="text-center">
                                {% load static %}
                                <img src="/media/{{ request.user.avatar }}" alt="图片加载" height="100" id="myimg">
                                {#点击图片也可以打开文件，进行上传 因为label for 的id是文件上传的#}
                                选择头像
                            </label>
                            <input type="file" id="myfile" name="avatar" style="display: none">
                            <!--display:none  隐藏掉-->
                            <div> 账户名：<input type="text" value="{{ request.user.username }}" class="form-control"
                                             disabled>
                            </div>
                            <div>邮箱：<input type="text" id="email" value="{{ request.user.email }}" class="form-control">
                            </div>
                            <div>手机：<input type="text" id="phone" value="{{ request.user.phone }}" class="form-control">
                            </div>
                            <br>
                            <div>
                                <button class="btn btn-primary btn-block" id="submit_id_id">修改</button>
                            </div>
                            <br>

                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}


{% block js %}
    <script>


        //修改密码的ajax请求

        $('#id_editer').click(function () {

            let old_pwd = $('#id_old_pwd').val()
            let new_pwd = $('#id_new_pwd').val()
            let comfir_pwd = $('#id_confirm_pwd').val()

            $.ajax({
                url: '/app01/set_password/',
                type: 'post',
                data: {'old_pwd': old_pwd, 'new_pwd': new_pwd, 'confirm_pwd': comfir_pwd},
                success: function (attr) {
                    if (attr.code === 1000) {
                        alert(attr.msg)
                        window.location.reload()
                    } else if (attr.code === 2000) {
                        $('#error').text(attr.msg)
                    } else if (attr.code === 3000) {
                        $('#error').text(attr.msg)
                    }
                }
            })


        });

        //文本域变化事件,修改头像,可以有预览的功能
        $('#myfile').change(function () {
            //文件阅读器对象
            //1 先生成一个文件阅读器对象
            let myFileReaderObje = new FileReader();
            //2 获取用户上传的头像文件,怎么拿上传的文件，通过下面，可以$(this)
            let fileObj = $('#myfile')[0].files[0]
            //3 将文件对象交给阅读器对象读取
            myFileReaderObje.readAsDataURL(fileObj)//异步操作，不等待文件阅读完毕，文件还没有读完，就走到下一步了。
            //4 利用文件阅读器将文件展示到前端页面，修改src属性
            //等待文件阅读器加载完毕再执行，unload,再显示图片
            myFileReaderObje.onload = function () {
                $('#myimg').attr('src', myFileReaderObje.result)
            }

        })


        //给修改用户信息发送ajax请求
        $('#submit_id_id').on('click',function () {
            let phone = $('#phone').val()
            let email =$('#email').val()
            let formdata2 = new FormData()
            formdata2.append('phone',phone)
            formdata2.append('email',email)
            formdata2.append('file',$('#myfile')[0].files[0])
            $.ajax({
                url:'{% url "app01_change_admin" %}',
                type:'post',
                data:formdata2,
                contentType:false,
                processData:false,
                success:function (attr) {
                    if(attr.code===1000){
                        alert(attr.msg)
                        parent.location.href=attr.url
                    }
                    else {
                        alert(attr.msg)
                    }

                }

            })

        })


    </script>
{% endblock %}